<template>
	<view>
		<view class="table-box">
			<table class="tab-clo">
				<tr>
					<th>理财师</th>
				</tr>
				<tr>
					<td>张三</td>
				</tr>
				<tr>
					<td>张三</td>
				</tr>
				<tr>
					<td>张三</td>
				</tr>
				<tr>
					<td>张三</td>
				</tr>
				<tr>
					<td>张三</td>
				</tr>
				<tr>
					<td>张三</td>
				</tr>
			</table>
			<view class="tab-other">
				<table class="tab">
					<tr>
						<th>任务类型</th>
						<th>标题</th>
						<th>内容</th>
						<th>开始日期</th>
						<th>理财师</th>
					</tr>
					<tr>
						<td>市场活动</td>
						<td>***会</td>
						<td>****</td>
						<td>2019-03-08</td>
						<td>张三</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td>2019-03-08</td>
						<td>张三</td>
					</tr>
					<tr>
						<td>王小田</td>
						<td></td>
						<td></td>
						<td>2019-03-08</td>
						<td>张三</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td>2019-03-08</td>
						<td>张三</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</view>
		</view>
		<view class="shado" v-show="showBg">
			<view class="prompt" v-show="showBg">
				<view class="row">
					<view class="left">
						开始时间
					</view>
					<view class="uni-list-cell-db chooseInp right">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input startDate ">{{date}}</view>
						</picker>
						<view class="connect">~</view>
						<picker mode="date" :value="date_end" :start="startDate" :end="endDate" @change="bindDateEndChange">
							<view class="uni-input endDate ">{{date_end}}</view>
						</picker>
					</view>
				</view>	
				<view class="row">
					<view class="left">
						主题
					</view>
					<view class="uni-list-cell-db chooseInp right">
						<input class="content" value="" type="text" />
					</view>
				</view>	
				<view class="row">
					<view class="left">
						选择姓名
					</view>
					<view class="uni-list-cell-db chooseP right">
						<input class="content" v-model="choose_name" type="text" value="" placeholder="请选择" @focus="showList()" />
						<ul v-show="!show">
							<li ref="liCon"  @click="chooseBank(item)" v-for="item in items">{{ item.message }}</li>
						</ul>
					</view>
				</view>	
				<view class="btn-box">
					<view class="questionBox" @click="closeBg()">
						<view class="question cancel">
							取消
						</view>
					</view>
					<view class="questionBox">
						<view class="question">
							<label class="iconfont">&#xe65a;</label>查询
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
	
</template>

<script>
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import cityData from '../../../common/city.data.js';
	export default {
		components:{
			mpvuePicker,
		},
		data() {
			return {
				imgurl:'http://ai.ylcaifu.com/appimg/images/5.0-%E6%88%91%E7%9A%84-%E7%90%86%E8%B4%A2%E5%B8%88/5.1.4-%E5%AE%A2%E6%88%B7%E8%AF%A6%E6%83%85/android/drawable-xhdpi',
				date:'请选择开始日期',
				date_end:'请选择结束日期',
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				choose_name:'',
				show: true,
				showBg: false,
				items: [
					{ message: '所有人' },
					{ message: '李明' },
					{ message: '王辉' },
					{ message: '慧慧' },
					{ message: '明明' },
					{ message: '李明' },
					{ message: '王辉' },
					{ message: '慧慧' },
					{ message: '明明' },
					{ message: '李明' },
					{ message: '王辉' },
					{ message: '慧慧' },
					{ message: '明明' }
				]
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			closeBg() {
				this.showBg = !this.showBg
			},
			showList() {
				this.show = !this.show
			},
			chooseBank(item) {
				this.choose_name = item.message;
				this.show = !this.show
			},
			
			bindDateChange: function(e) {
				this.date = e.target.value
				this.defaultTipDate='';
			},
			bindDateEndChange: function(e) {
				this.date_end = e.target.value
				this.defaultTipDate='';
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
			// 获取城市
		},
		onNavigationBarButtonTap(e){
			// console.log(123)
			if(e.text == "筛选") {
				this.showBg = !this.showBg
			}else {
				uni.navigateTo({
						url: '/pages/my/work-place/work-task',
						success: res => {},
						fail: () => {},
						complete: () => {}
				});
			}
		}
	}
</script>

<style>
	table, td, th{
		border:1px solid #ccc;
	}
	page {
		background: white;
	}
	.table-box {
		/* width: 460px; */
		
	}
	table {
		float: left;
		border-collapse: collapse;
		margin-top: 20px;
		text-align: center;
	}
	.tab-clo {
		margin-left: 15px;
		width: 60px;
	}
	.tab {
		width: 400px;
		margin-left: -1px;
	}
	.tab-other {
		width: 280px;
		overflow: hidden;
		overflow-x: scroll;  
		/* 内容会被裁剪，会以滚动条显示 */ 
		overflow-y: hidden;  /* 超出内容不可见 */ 
		white-space: nowrap;   /*不换行*/
	}
	table tr:nth-child(even) {
		background:rgba(245,245,245,1);
	}
	th {
		height: 35px;
		background:linear-gradient(0deg,rgba(196,156,90,1) 0%,rgba(226,196,138,1) 100%);
		color: #fff;
	}
	tr td {
		height: 30px;
	}
	
	.prompt {
		width: 330px;
		height: 200px;
		border: 1px solid #ccc;
		background: white;
		margin: 200px auto;
		padding-top: 30px;
		border-radius: 10px;
		z-index: 100;
	}
	.row {
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.left {
		font-size:12px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-left: 10px;
		flex: 1;
		padding-right: 20px;
		text-align: right;
	}
	.right {
		flex: 5;
		display: flex;
		color: #666666;
	}
	.uni-input {
		width: 110px;
		height: 25px;
		border: 1px solid #ccc;
		text-align: center;
	}
	.connect {
		width: 10px;
		height: 10px;
		margin-top: 10px;
	}
	.content {
		border: 1px solid #ccc;
	}
	.chooseP {
		position: relative;
	}
	ul {
		width:150px;
		height: 200px;
		background: #ffffff;
		list-style: none;
		border: 1px solid #ccc;
		/* text-align: left; */
		padding: 0;
		position: absolute;
		left: 0;
		top: 30px;
		overflow-y: scroll;
	}
	li {
		height: 25px;
		line-height: 25px;
	}
	.shado {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.4);
		z-index: 99;
	}
	.btn-box {
		width: 280px;
		margin-left: 30px;
		display: flex;
	} 
	.questionBox {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;
	}
	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);
	}
	label {
		margin-right: 10upx;
	}
	.cancel {
		background: #FFFFFF;
		color: #666666;
		border: 1px solid rgba(196, 156, 90, 1);
	}
</style>

